<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        .tu {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            top: 200px;
            position: relative;
        }
        
        img {
            position: relative;
        }
        
        .left {
            width: 20px;
            height: 20px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: black;
            position: absolute;
            color: white;
            opacity: 0.0;
            left: 0;
            top: 130px;
            font-weight: 900;
            font-family: 'icomoon';
        }
        
        .right {
            width: 20px;
            height: 20px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            background-color: black;
            color: white;
            position: absolute;
            opacity: 0.0;
            right: 0;
            top: 130px;
            font-weight: 900;
            font-family: 'icomoon';
        }
        
        .left:hover {
            opacity: 0.9;
        }
        
        .right:hover {
            opacity: 0.9;
        }
        
        ul {
            width: 100px;
            height: 20px;
            position: absolute;
            bottom: 10px;
            left: 180px;
        }
        
        ul>li {
            width: 16px;
            height: 16px;
            list-style: none;
            background-color: white;
            opacity: 1.0;
            border-radius: 8px;
            float: left;
            margin-left: 4px;
            opacity: 0.6;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?26jsqa');
            src: url('fonts/icomoon.eot?26jsqa#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?26jsqa') format('truetype'), url('fonts/icomoon.woff?26jsqa') format('woff'), url('fonts/icomoon.svg?26jsqa#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<body>
    <div class="tu">
        <img src="img/f1.jpg" id="img" />
        <div class="left"></div>
        <div class="right"></div>
        <ul>
            <li onmouseover="gew(this)" style="opacity: 0.9"></li>
            <li onmouseover="gew(this) "></li>
            <li onmouseover=" gew(this)"></li>
            <li onmouseover="gew(this)"></li>
            <li onmouseover=" gew(this)"></li>
        </ul>
    </div>
    <script>
        var arrli = $("ul li").toArray();
        var flag = 1;
        var id = setInterval(nchan, 3000);
        $(".tu").hover(function() {
            $(".left").css("opacity", 0.6);
            $(".right").css("opacity", 0.6);
        }, function() {
            $(".left").css("opacity", 0);
            $(".right").css("opacity", 0);
        })

        function gew(obj) {
            $("ul li").each(function() {
                $(this).css("opacity", "0.6");
            });
            $(obj).css("opacity", "0.9");
            clearInterval(id);
            id = setInterval(nchan, 3000);
        }
        $("ul li").mouseover(function() {
            var index = $("ul li").index(this);
            $("#img").attr("src", "img/f" + (index + 1) + ".jpg");
        });

        function nchan() {
            var lengt = $("ul li").length;
            var arr = $("ul li").toArray();
            for (var i = 0; i < arr.length; i++) {
                if ($(arr[i]).css("opacity") == 0.9) {
                    if (i + 1 < lengt) {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[i + 1]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f" + (i + 2) + ".jpg");
                        return;
                    } else {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[0]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f1.jpg");
                        return;
                    }
                }
            }
        }

        $(".left").click(function() {
            clearInterval(id);
            var lengt = $("ul li").length;
            var arr = $("ul li").toArray();
            for (var i = arr.length - 1; i >= 0; i--) {
                if ($(arr[i]).css("opacity") == 0.9) {
                    console.log(i);
                    if ((i - 1) >= 0) {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[i - 1]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f" + i + ".jpg");
                        $("#img").attr("src", "img/f" + i + ".jpg");
                        id = setInterval(nchan, 3000);
                        return;
                    } else {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[4]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f5.jpg");
                        id = setInterval(nchan, 3000);
                        return;
                    }
                }
            }

        });
        $(".right").click(function() {
            clearInterval(id);
            var lengt = $("ul li").length;
            var arr = $("ul li").toArray();
            for (var i = 0; i < arr.length; i++) {
                if ($(arr[i]).css("opacity") == 0.9) {
                    if (i + 1 < lengt) {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[i + 1]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f" + (i + 2) + ".jpg");
                        id = setInterval(nchan, 3000);
                        return;
                    } else {
                        $(arr[i]).css("opacity", "0.6");
                        $(arr[0]).css("opacity", "0.9");
                        $("#img").attr("src", "img/f1.jpg");
                        id = setInterval(nchan, 3000);
                        return;
                    }
                }
            }
        });
    </script>
</body>

</html>